/**
 * 登录页
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ListView,
  TouchableHighlight,
  Image,
  Dimensions,
  TextInput,
} from 'react-native';

import Toast from 'react-native-root-toast';
import Request from '../common/request';
import Config from '../common/config';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Button from 'react-native-button';
import t from 'tcomb-form-native';

var Form = t.form.Form;

let width = Dimensions.get('window').width;//获取视口宽度
let height = Dimensions.get('window').height;

// here we are: define your domain model
var Person = t.struct({
  email: t.String,              // a required string
  password: t.String,         // an optional string
  //age: t.Number,               // a required number
  //rememberMe: t.Boolean        // a booleanß
});

var options = {
  fields: {
    email: {
      error: "输入正确邮箱",
      label: "",
      placeholder: "邮箱"
    },
    password: {
      error: "输入正确密码",
      label: "",
      placeholder: "密码"
    },
  },
  auto: "none"
};

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textInput: '',
    }
  }
  onPress() {
    // call getValue() to get the values of the form
    var value = this.refs.form.getValue();
    if (value) { // if validation fails, value will be null
      this.doLogin(value);
      //console.log(value);
    }
  }

  doLogin(data) {
    console.log("doing login with: " + JSON.stringify(data));
    let options = {
      method: "POST",
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data)
    }
    fetch(Config.api.login, options)
    .then((response) => response.json())
    .then((response) => {
      console.log(response);
      if (response.ret == 0) {
        this.props.afterLogin(response.data.token);
      } else {
        Toast.show(response.msg);
      }
    })
    .catch((error) => {
      console.error(error);
      Toast.show(error.message);
    })
  }

  render() {
    return (
      <View style={styles.container}>
          <Text style={styles.title}>用户登录</Text>
          <Form
            ref="form"
            type={Person}
            options={options}
          />
          <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>提交</Text>
          </TouchableHighlight>        
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    padding: 20,
  },
  title: {
    fontSize: 30,
    alignSelf: 'center',
    marginBottom: 30
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }

});

module.exports = Login;

